<template>
  <div class="flex flex-col items-center justify-center">
    <!-- <div class="w-full flex justify-end px-4 pb-4">
      <van-icon name="down" size="24" color="#fff" @click="downVideo" />
    </div> -->
    <div id="video_player" class="flex-1"></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import Player from 'xgplayer/dist/core_player'
import play from 'xgplayer/dist/controls/play'
import fullscreen from 'xgplayer/dist/controls/fullscreen'
import progress from 'xgplayer/dist/controls/progress'
import volume from 'xgplayer/dist/controls/volume'
import pip from 'xgplayer/dist/controls/pip'
import flex from 'xgplayer/dist/controls/flex'
import enter from 'xgplayer/dist/controls/enter'
import loading from 'xgplayer/dist/controls/loading'
import memoryPlay from 'xgplayer/dist/controls/memoryPlay'
import replay from 'xgplayer/dist/controls/replay'
import download from 'xgplayer/dist/controls/download'
import playbackRate from 'xgplayer/dist/controls/playbackRate'
import { downloadFile } from '@/utils/common'

type VideoPlayerProps = {
  url?: string
  poster?: string
}

const props = defineProps<VideoPlayerProps>()

const player = ref()

const createPlay = () => {
  player.value = new Player({
    id: 'video_player',
    url: props.url,
    poster: props.poster,
    controlPlugins: [
      play,
      fullscreen,
      progress,
      volume,
      pip,
      flex,
      enter,
      loading,
      memoryPlay,
      replay,
      playbackRate,
      download
    ],
    pip: true,
    fluid: false,
    autoplay: true,
    videoInit: true,
    download: true,
    lang: 'zh-cn',
    playbackRate: [0.5, 0.75, 1, 1.5, 2],
  })
}

const downVideo = () => {
  downloadFile(props.url, props.url)
}

onMounted(() => {
  nextTick(() => {
    createPlay()
  })
})

onUnmounted(() => {
  try {
    player.value?.destroy()
  } catch (error) { }
})
</script>

<style lang="scss" scoped></style>
